<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
  <style type="text/css">
*{margin:0;padding:0;list-style:none;}
#cUl{overflow: hidden;background:#eee;border:solid 1px #ccc;padding:30px;margin:30px auto;width: 205px;}
#cUl li{border:solid 1px #f90;padding:10px;background:#fff;width: 70px;height: 70px;text-align: center;float:left;margin: 5px;}
#cUl li span{display: inline-block;height:50px;width: 100%;position: relative;}
#cUl li i{display: inline-block;background:#f90;width: 20px;height: 20px;margin:0 auto;position: absolute;top:12px;left:34%;}
#cUl li:hover{color:#f90;}
  </style>
  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
<ul id="cUl">
  <li><span><i></i></span>打广告</li><li><span><i></i></span><p>打广告</p></li>
  <li><span><i></i></span><p>打广告</p></li><li><span><i></i></span><p>打广告</p></li>
</ul>
<script type="text/javascript">
$(function(){
  $('#cUl li').mouseenter(function(){
      $(this).find('i').animate({top:"0",opacity:"0"},300,function(){
        $(this).css({top:"24px"});
        $(this).animate({top:"12px",opacity:"100"},200)
      })
    }
  )
})
</script>
</body>
</html>
